<template>
  <svg
    aria-hidden="true"
    viewBox="0 0 32 32"
    fill="none"
    class="h-8 w-8 [--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]"
  >
    <defs>
      <radialGradient
        id=":r1d:-gradient"
        cx="0"
        cy="0"
        r="1"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(0 21 -21 0 20 11)"
      >
        <stop stop-color="#2e7eee"></stop>
        <stop stop-color="#22D3EE" offset=".527"></stop>
        <stop stop-color="#818CF8" offset="1"></stop>
      </radialGradient>
      <radialGradient
        id=":r1d:-gradient-dark-1"
        cx="0"
        cy="0"
        r="1"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
      >
        <stop stop-color="#2e7eee"></stop>
        <stop stop-color="#22D3EE" offset=".527"></stop>
        <stop stop-color="#818CF8" offset="1"></stop>
      </radialGradient>
      <radialGradient
        id=":r1d:-gradient-dark-2"
        cx="0"
        cy="0"
        r="1"
        gradientUnits="userSpaceOnUse"
        gradientTransform="matrix(0 14 -14 0 16 10)"
      >
        <stop stop-color="#2e7eee"></stop>
        <stop stop-color="#22D3EE" offset=".527"></stop>
        <stop stop-color="#818CF8" offset="1"></stop>
      </radialGradient>
    </defs>
    <g class="dark:hidden">
      <circle cx="20" cy="20" r="12" fill="url(#:r1d:-gradient)"></circle>
      <g
        fill-opacity="0.5"
        class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M3 9v14l12 6V15L3 9Z"></path>
        <path d="M27 9v14l-12 6V15l12-6Z"></path>
      </g>
      <path
        d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z"
        fill-opacity="0.5"
        class="fill-[var(--icon-background)]"
      ></path>
      <g
        class="stroke-[color:var(--icon-foreground)]"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M20 5.5 27 9l-12 6L3 9l7-3.5"></path>
        <path
          d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5"
        ></path>
      </g>
    </g>
    <g
      class="hidden dark:inline"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path
        d="M17.676 3.38a3.887 3.887 0 0 0-3.352 0l-9 4.288C3.907 8.342 3 9.806 3 11.416v9.168c0 1.61.907 3.073 2.324 3.748l9 4.288a3.887 3.887 0 0 0 3.352 0l9-4.288C28.093 23.657 29 22.194 29 20.584v-9.168c0-1.61-.907-3.074-2.324-3.748l-9-4.288Z"
        stroke="url(#:r1d:-gradient-dark-1)"
      ></path>
      <path
        d="M16.406 8.087a.989.989 0 0 0-.812 0l-7 3.598A1.012 1.012 0 0 0 8 12.61v6.78c0 .4.233.762.594.925l7 3.598a.989.989 0 0 0 .812 0l7-3.598c.361-.163.594-.525.594-.925v-6.78c0-.4-.233-.762-.594-.925l-7-3.598Z"
        fill="url(#:r1d:-gradient-dark-2)"
        stroke="url(#:r1d:-gradient-dark-2)"
      ></path>
    </g>
  </svg>
</template>
